<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--树结构-->
      <el-col :span="isHide ? 1 : 6" :xs="24" class="relative">
        <div class="app-container-tree-border">
          <project-tree-select-inner class="cd-mb8" :projectId="projectId" @changeProject="changeProject" />
          <el-tree :data="treeList" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
            highlight-current @node-click="handleNodeClick">
            <div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
          </el-tree>
          <div class="tree-hide-button iconfont" :class="isHide ? 'icon-xiangyou' : 'icon-xiangzuo'"
            @click="() => { isHide = !isHide }">
          </div>
        </div>
      </el-col>
      <el-col :span="isHide ? 23 : 18" :xs="24">
        <div class="app-container-table-border">
          <el-row v-if="queryParams.bdId" :gutter="10"
            class="cd-pr8 top-right-btn small-line-height multiselect--active">
            <el-col :span="1.5" v-if="treeInfo.id && canChgOperation()">
              <el-button v-if="canAlteration" type="primary" plain size="mini" @click="doAlteration"
                v-hasPermi="['cm:baContractSheets:edit']">保存</el-button>
              <el-button v-else type="primary" plain size="mini" @click="onAlteration"
                v-hasPermi="['cm:baContractSheets:edit']">变更</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button v-if="activeName == 'first' && !canAlteration" size="mini" type="primary"
                :loading="buttonLoading" :disabled="!this.treeInfo.id || !canOperation()"
                @click="submitForm">保存</el-button>
            </el-col>
            <el-col :span="1.5" v-if="form.contractId">
              <el-button type="primary" size="mini" plain :disabled="!canOperation() && !canChgOperation()"
                @click="onExamine">发起审批</el-button>
            </el-col>
            <el-col :span="1.5" v-if="form.contractId">
              <el-button type="text" :disabled="!(approvalStatus !== '00' || chgApprovalStatus !== '00')"
                @click="handleProcess()">
                {{ reportStatusFormat() }}
              </el-button>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane label="合同信息" name="first">
              <!-- \ class="app-container-table-border" -->
              <div>
                <el-form ref="form" :model="form" label-width="10px" :rules="rules">
                  <el-descriptions class="margin-top" :column="4" border labelClassName="descriptions-label">
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"><span style="color: #ff4949">*</span> 合同名称</template>
                      <el-form-item prop="contractName">
                        <el-input v-if="canOperation()" v-model="form.contractName" placeholder="请输入合同名称" />
                        <span v-else>{{ form.contractName }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label">合同金额</template>
                      <el-form-item prop="contractAmount">
                        <el-input v-if="canOperation()" v-model="form.contractAmount" disabled placeholder="请输入合同金额" />
                        <span v-else>{{ form.contractAmount }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label">变更后合同金额</template>
                      <el-form-item prop="chgContractAmount">
                        <el-input v-if="canOperation()" v-model="form.chgContractAmount" disabled />
                        <span v-else>{{ form.chgContractAmount }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label">开工预付款比例(%)</template>
                      <el-form-item prop="kgyfkbl">
                        <el-input v-if="canOperation()" v-model="form.kgyfkbl" placeholder="请输入开工预付款比例" />
                        <span v-else>{{ form.kgyfkbl }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">建设场景1</template>
                      <el-form-item prop="contractName">
                        <el-input v-if="canOperation()" v-model="form.scene1" placeholder="请输入建设场景" />
                        <span v-else>{{ form.scene1 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">容量1</template>
                      <el-form-item prop="rongliang">
                        <el-input v-if="canOperation()" v-model="form.rongliang1" @change="countHtje"
                          placeholder="请输入容量" />
                        <span v-else>{{ form.rongliang1 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">单价1</template>
                      <el-form-item prop="danjia">
                        <el-input v-if="canOperation()" v-model="form.danjia1" @change="countHtje"
                          placeholder="请输入单价" />
                        <span v-else>{{ form.danjia1 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">建设场景2</template>
                      <el-form-item prop="contractName">
                        <el-input v-if="canOperation()" v-model="form.scene2" placeholder="请输入建设场景" />
                        <span v-else>{{ form.scene2 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">容量2</template>
                      <el-form-item prop="rongliang">
                        <el-input v-if="canOperation()" v-model="form.rongliang2" @change="countHtje"
                          placeholder="请输入容量" />
                        <span v-else>{{ form.rongliang2 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">单价2</template>
                      <el-form-item prop="danjia">
                        <el-input v-if="canOperation()" v-model="form.danjia2" @change="countHtje"
                          placeholder="请输入单价" />
                        <span v-else>{{ form.danjia2 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">建设场景3</template>
                      <el-form-item prop="contractName">
                        <el-input v-if="canOperation()" v-model="form.scene3" placeholder="请输入建设场景" />
                        <span v-else>{{ form.scene3 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">容量3</template>
                      <el-form-item prop="rongliang">
                        <el-input v-if="canOperation()" v-model="form.rongliang3" @change="countHtje"
                          placeholder="请输入容量" />
                        <span v-else>{{ form.rongliang3 }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
                      <template slot="label">单价3</template>
                      <el-form-item prop="danjia">
                        <el-input v-if="canOperation()" v-model="form.danjia3" @change="countHtje"
                          placeholder="请输入单价" />
                        <span v-else>{{ form.danjia3 }}</span>
                      </el-form-item>
                    </el-descriptions-item> -->
                    <!-- </el-descriptions> -->
                    <!-- <el-descriptions class="descriptions-conter" :column="4" border labelClassName="descriptions-label"
                    v-for="(item, index) in form.sceneList" :key="'scene' + index"> -->
                    <template class="descriptions-conter" v-for="(item, index) in form.sceneList">

                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">建设场景{{ index + 1 }}</template>
                        <el-form-item prop="sceneName">
                          <el-input v-if="canOperation()" v-model="item.sceneName" placeholder="请输入建设场景" />
                          <span v-else>{{ item.sceneName }}</span>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">容量{{ index + 1 }}</template>
                        <el-form-item prop="capacity">
                          <el-input v-if="canOperation()" v-model="item.capacity" @change="countHtje"
                            placeholder="请输入容量" />
                          <span v-else>{{ item.capacity }}</span>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">变更容量{{ index + 1 }}</template>
                        <el-form-item prop="chgCapacity">
                          <el-input v-if="canAlteration" v-model="item.chgCapacity" @change="countchgHtje"
                            placeholder="请输入变更容量" />
                          <span v-else>{{ item.chgCapacity }}</span>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">单价{{ index + 1 }}</template>
                        <el-form-item prop="price">
                          <div v-if="canOperation()" class="flex align-center">
                            <el-input v-model="item.price" @change="countHtje" placeholder="请输入单价" />
                            <div style="width: 54px;">
                              <i class="el-icon-circle-plus-outline cd-ml4 theme-color pointer"
                                @click="addSceneList"></i>
                              <i class="el-icon-delete cd-ml4 red pointer" v-if="index > 0"
                                @click="delSceneList(index)"></i>
                            </div>
                          </div>
                          <span v-else>{{ item.price }}</span>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">变更单价{{ index + 1 }}</template>
                        <el-form-item prop="chgPrice">
                          <div class="flex align-center">
                            <el-input v-if="canAlteration" v-model="item.chgPrice" @change="countchgHtje"
                              placeholder="请输入变更单价" />
                            <span v-else>{{ item.chgPrice }}</span>
                          </div>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label">变更后单价{{ index + 1 }}</template>
                        <el-form-item prop="chgedPrice">
                          <span v-if="canAlteration">{{ item.chgedPrice }}</span>
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label"></template>
                        <el-form-item prop="price">
                        </el-form-item>
                      </el-descriptions-item>
                      <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                        <template slot="label"></template>
                        <el-form-item prop="price">
                        </el-form-item>
                      </el-descriptions-item>
                      <!-- </el-descriptions> -->
                    </template>
                    <!-- <el-descriptions class="descriptions-conter" :column="4" border labelClassName="descriptions-label"> -->
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 开始时间</template>
                      <el-form-item prop="beginDate">
                        <el-date-picker v-if="canOperation()" clearable v-model="form.beginDate" type="date"
                          value-format="yyyy-MM-dd" placeholder="请选择开始时间" style="width: 100%;">
                        </el-date-picker>
                        <span v-else>{{ parseTime(form.beginDate, '{y}-{m}-{d}') }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 结束时间</template>
                      <el-form-item prop="endDate">
                        <el-date-picker v-if="canOperation()" clearable v-model="form.endDate" type="date"
                          value-format="yyyy-MM-dd" placeholder="请选择结束时间" style="width: 100%;">
                        </el-date-picker>
                        <span v-else>{{ parseTime(form.endDate, '{y}-{m}-{d}') }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 签订时间</template>
                      <el-form-item prop="signDate">
                        <el-date-picker v-if="canOperation()" clearable v-model="form.signDate" type="date"
                          value-format="yyyy-MM-dd" placeholder="请选择签订时间" style="width: 100%;" />
                        <span v-else>{{ parseTime(form.signDate, '{y}-{m}-{d}') }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 甲方单位名称</template>
                      <el-form-item prop="partAName">
                        <el-input v-if="canOperation()" v-model="form.partAName" placeholder="请输入甲方单位名称" />
                        <span v-else>{{ form.partAName }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 乙方单位名称</template>
                      <el-form-item prop="partBName">
                        <el-input v-if="canOperation()" v-model="form.partBName" placeholder="请输入乙方单位名称" />
                        <span v-else>{{ form.partBName }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 扣除奖励基金比例(‰)</template>
                      <el-form-item prop="kcjljjbl">
                        <el-input v-if="canOperation()" v-model="form.kcjljjbl" placeholder="请输入扣除奖励基金比例" />
                        <span v-else>{{ form.kcjljjbl }}</span>
                      </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item labelStyle="width: 90px" contentStyle="width: 160px">
                      <template slot="label"> 合同备注</template>
                      <el-form-item prop="remark">
                        <el-input v-if="canOperation()" v-model="form.remark" placeholder="请输入合同备注" />
                        <span v-else>{{ form.remark }}</span>
                      </el-form-item>
                    </el-descriptions-item>
                  </el-descriptions>

                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="合同信息里程碑" name="second" :disabled="!form.contractId">
              <bsContractInfoMilestone :disabled="!canOperation()" :contractId="form.contractId" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <examine-and-approve ref="examineAndApproveRef" @callBack="handleQuery" />

  </div>
</template>

<script>
import { listBsContractInfo, getBsContractInfo, delBsContractInfo, addBsContractInfo, updateBsContractInfo, getApprovalStatus } from "@/api/cm/bsContractInfo";
import { queryBdSelect } from "@/api/base/bsBd";
import { mapGetters } from "vuex";
import bsContractInfoMilestone from "@/views/base/bsContractInfoMilestone/index.vue";
import ExamineAndApprove from './examine-and-approve.vue';
import decimal from "@/utils/big-decimal";
import { editBatchBaContractSheets } from "@/api/cm/baContractSheets";

export default {
  name: "BsContractInfo",
  dicts: ['report_status'],
  components: {
    bsContractInfoMilestone,
    ExamineAndApprove
  },
  data () {
    return {
      isHide: false,
      canAlteration: false,
      activeName: "first",
      lookView: false,
      treeList: [],
      treeInfo: {},
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        bdId: undefined,
        contractNum: undefined,
        contractType: undefined,
        contractName: undefined,
        signDate: undefined,
        capacity: undefined,
        price: undefined,
        contractAmount: undefined,
        partADeptId: undefined,
        partAName: undefined,
        partBDeptId: undefined,
        partBName: undefined,
        payStatus: undefined,
        approvalStatus: undefined,
        beginDate: undefined,
        endDate: undefined,
        kcjljjbl: undefined,
        kgyfkbl: undefined
      },
      projectId: undefined,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        contractName: [{ required: true, message: "合同名称不能为空", trigger: "blur" }]
      },
      approvalStatus: '00',
      chgApprovalStatus: '11',
    };
  },

  computed: {
    ...mapGetters(["sysProjectId", "sysProjectList"])
  },
  created () {
    this.changeProject();
  },
  watch: {
    sysProjectId (newVal, oldVal) {
      // 系统顶部选中项目变化
      this.changeProject(newVal);
    }
  },
  methods: {
    changeProject (projectId = this.sysProjectId) {
      this.projectId = projectId;
      this.getBdTree();
    },
    getBdTree () {
      queryBdSelect({ projectId: this.projectId }).then((response) => {
        this.treeList = response.data;
        // 选中左侧树
        this.$nextTick(() => {
          if (this.treeList.length > 0) {
            this.$refs.tree.setCurrentKey(this.treeList[0].id);
            this.handleNodeClick(this.treeList[0]);
          } else {
            this.treeInfo = {};
            this.queryParams.bdId = undefined;
            this.getList();
          }
        });
      });
    },
    handleNodeClick (data) {
      this.treeInfo = data;
      this.queryParams.bdId = data.id; //标段ID
      this.handleQuery();
      this.activeName = 'first';
      // if (data.parentId) {
      //   this.queryParams.bdId = data.parentId; //标段ID
      //   this.queryParams.zdId = data.id; //站点ID
      // } else {
      //   this.queryParams.zdId = null; //站点ID
      // this.queryParams.bdId = data.id; //标段ID
      // }
    },
    /** 查询合同管理列表 */
    async getList () {
      try {
        this.loading = true;
        const response = await listBsContractInfo(this.queryParams);
        if (this.queryParams.bdId && response.rows && response.rows.length > 0) {
          this.form = response.rows[0] || {};
          if (!this.form.sceneList || this.form.sceneList.length == 0) {
            this.form.sceneList = [{
              sceneName: undefined,
              capacity: undefined,
              price: undefined,
            }];
          }
          this.approvalStatus = this.form.approvalStatus || '00';
          this.chgApprovalStatus = this.form.chgApprovalStatus || '00';
        } else {
          this.reset();
          this.approvalStatus = "00";
          this.chgApprovalStatus = "00";
        }

        this.total = response.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }

    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        contractId: undefined,
        bdId: undefined,
        contractNum: undefined,
        contractType: undefined,
        contractName: undefined,
        signDate: undefined,
        scene1: undefined,
        scene2: undefined,
        scene3: undefined,
        rongliang1: undefined,
        rongliang2: undefined,
        rongliang3: undefined,
        danjia1: undefined,
        danjia2: undefined,
        danjia3: undefined,
        contractAmount: undefined,
        chgContractAmount: undefined,
        partADeptId: undefined,
        partAName: undefined,
        partBDeptId: undefined,
        partBName: undefined,
        payStatus: undefined,
        approvalStatus: undefined,
        beginDate: undefined,
        endDate: undefined,
        kcjljjbl: undefined,
        kgyfkbl: undefined,
        remark: undefined,
        sceneList: [
          {
            sceneName: undefined,
            capacity: undefined,
            chgCapacity: undefined,
            price: undefined,
          }
        ]
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
      // this.getContractSheetsStatus();
    },
    // 合同信息审批状态
    getContractSheetsStatus () {
      if (!this.queryParams.bdId) {
        return;
      }
      const query = {
        bdId: this.queryParams.bdId,
      };
      getApprovalStatus(query).then(res => {
        const { approvalStatus, chgApprovalStatus } = res.data || { approvalStatus: '00', chgApprovalStatus: '00' };
        this.approvalStatus = approvalStatus;
        this.chgApprovalStatus = chgApprovalStatus;
      });
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map((item) => item.contractId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 查看合同信息里程碑
    handleView (row) {
      this.$router.push({ path: "/base/BsContractInfoMilestone", query: { contractId: row.contractId } });
      // listBsContractInfoMilestone({ contractId: row.contractId }).then((res) => {
      // });
    },
    handleAddLookView () { },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.contractId != null) {
            this.form.sceneList = this.form.sceneList.filter(obj => Object.keys(obj).length > 0);
            console.log('删除后------------------------------', this.form.sceneList);
            updateBsContractInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            this.form.bdId = this.treeInfo.id;
            this.form.projectId = this.sysProjectId;
            addBsContractInfo(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const contractIds = row.contractId || this.ids;
      this.$modal
        .confirm('是否确认删除合同管理编号为"' + contractIds + '"的数据项？')
        .then(() => {
          this.loading = true;
          return delBsContractInfo(contractIds);
        })
        .then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download(
        "cm/bsContractInfo/export",
        {
          ...this.queryParams
        },
        `bsContractInfo_${new Date().getTime()}.xlsx`
      );
    },
    // 计算合同额 这里需要修改
    countHtje () {
      let num = 0;
      // for (let index = 1; index <= 3; index++) {
      //   let a = this.form['rongliang' + index]; //数量
      //   let b = this.form['danjia' + index]; //单价
      //   const c = decimal.multiply(a, b);
      //   num = decimal.add(num, c);
      // }
      for (let index = 0; index < this.form.sceneList.length; index++) {
        const info = this.form.sceneList[index];
        let a = info.capacity; //数量
        let b = info.price; //单价
        let m = info.chgPrice; //变更单价
        const c = decimal.multiply(a, b, 2);
        // 添加了变更单价、变更后单价，合同金额的计算不变
        num = decimal.add(num, c, 2);
      }
      this.form.contractAmount = num;
      this.countchgHtje();
    },
    countchgHtje () {
      let num = 0;
      for (let index = 0; index < this.form.sceneList.length; index++) {
        const info = this.form.sceneList[index];
        let g = info.capacity; // 容量
        let a = info.chgCapacity; //变更容量
        let b = info.price; //单价
        let m = info.chgPrice; //变更单价
        info.chgedPrice = decimal.add(b, m, 4); //变更后单价 = 单价 + 变更单价
        // const c = decimal.multiply(a, b);
        // 添加了变更单价、变更后单价，变更后合同金额的计算调整
        // 需求改动：变更后合同金额= (容量+变更容量) * 变更后单价
        const ga = decimal.add(g, a, 2);
        const c = decimal.multiply(ga, info.chgedPrice, 2);
        // console.log('变更后容量', ga);
        // console.log('变更后单价', info.chgedPrice);
        num = decimal.add(num, c, 2);
      }
      // this.form.chgContractAmount = decimal.add(num,this.form.contractAmount);
      this.form.chgContractAmount = num;
      // this.$forceUpdate()
    },
    // 新增建设场景列表
    addSceneList () {
      this.form.sceneList.push({
        sceneName: undefined,
        capacity: undefined,
        price: undefined,
      });
      this.$forceUpdate();
    },
    // 删除建设场景列表
    delSceneList (index) {
      this.form.sceneList.splice(index, 1);
      this.countHtje(); // 重新计算合同金额
      this.$forceUpdate();
    },
    /** 发起审批 */
    onExamine () {
      const projectInfo = this.sysProjectList.find(item => item.projectId == this.sysProjectId);
      const info = {
        projectId: this.sysProjectId,
        projectName: projectInfo.projectName,
        bdId: this.queryParams.bdId,
        contractId: this.form.contractId,
        type: this.canChgOperation() ? 'HTBGSP' : 'HTSP'
      };
      this.$refs.examineAndApproveRef.init(info);
    },
    // 变更
    onAlteration () {
      this.canAlteration = true;
    },
    // 变更提交
    doAlteration () {
      this.buttonLoading = true;
      updateBsContractInfo(this.form)
        .then((response) => {
          this.$modal.msgSuccess("变更成功");
          this.getList();
        })
        .finally(() => {
          this.buttonLoading = false;
          this.canAlteration = false;
        });
    },
    // 状态字典翻译
    reportStatusFormat () {
      if (this.approvalStatus == '22' && this.chgApprovalStatus != '00') {
        return this.selectDictLabel(this.dict.type.report_status, this.chgApprovalStatus);
      }
      return this.selectDictLabel(this.dict.type.report_status, this.approvalStatus);
      // return this.selectDictLabel(this.dict.type.report_status, this.approvalStatus);
    },
    // 是否可操作
    canOperation () {
      return this.approvalStatus == '00' || this.approvalStatus == '33';
    },
    // 是否和变更操作
    canChgOperation () {
      return this.approvalStatus == '22' && this.chgApprovalStatus != '11';
    },
    // 跳转到审批处理页面
    handleProcess () {
      if (!this.form) {
        this.$message.warning("表单信息不存在！");
        return;
      }
      let info = this.form;
      if (!info.procInsId) {
        this.$message.warning("流程信息不存在！");
        return;
      }
      const processed = !(this.approvalStatus != '11' && this.chgApprovalStatus != '11') && info.currApproval;
      this.$router.push({
        path: '/workflow/process/detail/' + info.procInsId,
        query: {
          taskId: info.chgTaskId ? info.chgTaskId : info.taskId,
          chgProcInsId: info.chgProcInsId,
          isHT: info.chgProcInsId ? true : false,
          processed: processed
        }
      });
    },
    // 小数位数处理
    decimalsDispose (num1, num2) {
      let decimals = 0;
      if (String(num1).indexOf(".") != -1) {
        decimals = String(num1).split(".")[1].length;
      }
      if (String(num2).indexOf(".") != -1) {
        decimals = Math.max(decimals, String(num2).split(".")[1].length);
      }
      // console.log('decimals------------------', decimals);
      return decimals;
    }
  }
};
</script>
<style lang="scss" scoped>
.boxCenter {
  margin-top: 20px;
  text-align: center;
}

.tabs {
  // margin-top: 38px;

  ::v-deep {
    .el-tabs__nav-wrap {
      width: 100%
    }

    .el-tabs__item {
      height: 40px !important;
      line-height: 40px !important;
    }
  }
}

::v-deep {
  .descriptions-label {
    // width: 150px;
    color: #333;
    // text-align: right !important;
  }


}

.descriptions-conter {
  ::v-deep {
    .el-descriptions-item__cell {
      border-top: 0px solid #eee;
    }
  }
}
</style>
